<navigation:bottom-tab-bar
  xmlns="https://hyperview.org/hyperview"
  xmlns:navigation="https://hyperview.org/navigation"
  navigation:navigator="custom-bottom-tabs-navigator"
  id="bottom-tab-bar"
>
  <safe-area:safe-area-view
    xmlns:safe-area="https://hyperview.org/safe-area"
    key="tabbar-bottom"
    style="tabbar-bottom"
    safe-area:mode="padding"
    safe-area:insets="[&quot;right&quot;,&quot;bottom&quot;,&quot;left&quot;]"
  >
    <navigation:bottom-tab-bar-item
      navigation:route="custom-bottom-tabs-tab-1"
      style="tabbar-bottom-tab"
    >
      <view style="tabbar-bottom-tab-content">
        <view style="tabbar-bottom-tab-icon-selected">
          {% include 'icons/behaviors-selected.svg' %}
        </view>
        <view style="tabbar-bottom-tab-icon">
          {% include 'icons/behaviors.svg' %}
        </view>
        <text style="tabbar-bottom-tabbar-top-label">Tab 1</text>
        {% if notify_tab == 1 %}
          <view style="tabbar-bottom-tab-notify" />
        {% endif %}
      </view>
    </navigation:bottom-tab-bar-item>
    <navigation:bottom-tab-bar-item
      navigation:route="custom-bottom-tabs-tab-2"
      style="tabbar-bottom-tab"
    >
      <view style="tabbar-bottom-tab-content">
        <view style="tabbar-bottom-tab-icon-selected">
          {% include 'icons/advanced-selected.svg' %}
        </view>
        <view style="tabbar-bottom-tab-icon">
          {% include 'icons/advanced.svg' %}
        </view>
        <text style="tabbar-bottom-tabbar-top-label">Tab 2</text>
        {% if notify_tab == 2 %}
          <view style="tabbar-bottom-tab-notify" />
        {% endif %}
      </view>
    </navigation:bottom-tab-bar-item>
  </safe-area:safe-area-view>
</navigation:bottom-tab-bar>
